<template>
<div class="container-fluid admin-page-header border-bottom" >
    <div class="row">
        <div class="col-12 col-sm-12 col-md-6 title-box  ">
            <bi-icon  :data="pageIcon" v-if="pageIcon && !back" class="admin-header-icon" ></bi-icon>
            <bi-icon  data="fa-chevron-circle-left back"  class="admin-header-icon"  v-if="back" @click="$go(-1)" ></bi-icon>
            <div class="page-title" v-for="item,index in titleList">
                <bi-icon data="fa-angle-right" v-if="index!=0" class="page-title-icon"  />
                <span class="page-title-text">{{item}}</span>
            </div>
            <slot name="title"></slot>
        </div>
        <div class="col-12 col-sm-12 col-md-6 right-box ">
            <slot></slot>
        </div>
    </div>
</div>
</template>


<script>
export default{
    data(){
        let pageTitle  = this.$pageData.__headerTitle??'';
        if (this.title!=''){
            pageTitle = this.title;
        }
 
        let pageIcon = this.$pageData.__headerIcon??'';
        if (this.icon!=''){
            pageIcon = this.icon;
        }

        let titleList = [];

        if (pageTitle instanceof Array){
            titleList = pageTitle;
        }else{
            titleList = [pageTitle];
        }
 
        return {
            titleList,
            pageIcon
        }
    },
    props:{
        title:{
            type:[String,Array],
            default:''
        },
        icon:{
            type:String,
            default:''
        },
        back:{
            type:Boolean,
            default:false
        }
        
    }
}
</script>

<style>
.admin-page-header{
    background-color: #FFF;
    border: 1 solid #E0E0E0;
    margin-bottom: 10px;
    padding: 1em;
}

.admin-page-header .title-box{
    display: flex;
    align-items: center;
}

.admin-page-header .title-box .back{
    cursor: pointer;
}

.admin-page-header .title-box .back:hover{
    color: #000;
}

.admin-page-header .title-box .admin-header-icon{
    margin-right: 10px;
    font-size: 1.3em;
}

.admin-page-header .title-box  .page-title{
    display: flex;
    align-items: center;
}

.admin-page-header .title-box .page-title-text{
    font-size: 1.2em;
}

.admin-page-header .title-box .page-title-icon{
    color: var(--bs-gray-500);
    margin: 0 0.5em;
}

.admin-page-header .right-box{
    display: flex;
    align-items: center;
    justify-content: end;
}
</style>